<template>
	<div>
	<div class="search">
		<input v-model="keyword" type="text" class="search-input" placeholder="输入城市名或拼音">
	</div>
	<div class="search-content" ref="search" v-show="keyword">
		<ul>
			<li class="search-item border-bottom" v-for="item of list"  @click="handleCityClick(item.name)">{{item.name}}</li>
			<li class="border-bottom search-item" v-show="!list.length">
				没有找到匹配数据
			</li>
		</ul>
	</div>
	</div>
</template>

<script>
import Bscroll from 'better-scroll'
export default {
		name:'CitySearch',
		props:{
			cities:Object
		},
		data:function(){
			return {
				keyword:'',
				list:[],
				timer:null
			}
		},
		methods:{
			handleCityClick(city){
				this.$store.commit('changeCity',city);
				this.keyword= '';
				this.$router.push('/');
			}
		},
		mounted(){
			this.scroll = new Bscroll(this.$refs.search);
		},
		watch:{
			keyword (){
				if(this.timer){
					clearTimeout(this.timer)
				}
				if(!this.keyword){
					this.list = [];
					return;
				}
				this.timer=setTimeout(()=>{
					const result = [];
					for(let i in this.cities){
						this.cities[i].forEach((value)=>{
							if(value.spell.indexOf(this.keyword)>-1||value.name.indexOf(this.keyword)>-1){
								result.push(value);
							}
						})
					}
					this.list = result;
				},100);
			}
		}
	}
</script>

<style scoped>
	.search{
		margin-top: -.02rem;
		height:.73rem;
		line-height: .73rem;
		background: #00bcd4;
		padding: 0 .1rem;
	}
	.search-input{
		width: 100%;
		height: .62rem;
		border-radius: .1rem;
		color: #666;
		font-size: .28rem;
		text-align: center;
		padding: 0 .1rem;
		box-sizing: border-box;
	}
	.search-content{
		position: absolute;
		overflow: hidden;
		top:1.58rem;
		left:0;
		right:0;
		bottom:0;
		background: #eee;
		z-index: 2;
	}
	.search-item{
		line-height: .62rem;
		padding-left: .2rem;
		color: #666;
		background: #fff;
	}
</style>